import React, { Component } from "react";
import { attachmentPrefixUrl, defDrawerWidth } from "@/defaultSettings";
import styles from "@/pages/SystemInit/ArticleSetting/AddView/index.less";
import { Col, Drawer, Row } from "antd";
import BaseComponent from "@/components/BaseComponent";
import styled from "styled-components";

const PreviewBody = styled.div`
  .articleTitle {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }

  .articleContent {
    width: 100%;
    margin-top: 16px;
  }

  .attachmentsBox {
    display: flex;
    flex-direction: column;

    .title {
      font-weight: 600;
    }

    .link {
      margin-top: 8px;
    }
  }
`;

class PreviewView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    let { onClose, form, record, visible } = this.props;
    const { attachments } = record;
    let arr = [];
    if (attachments && attachments != "" > 0) {
      arr = JSON.parse(attachments);
    }
    return (
      <Drawer
        title={"预览"}
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
        className={styles.addView}
      >
        <PreviewBody>
          <Row gutter={16}>
            <Col span={24}>
              <div className={"articleTitle"}>
                <span>{record.title}</span>
              </div>
            </Col>
          </Row>
          {record.content && record.content != "" ? (
            <Row gutter={16}>
              <Col span={24}>
                <div
                  className={"articleContent"}
                  dangerouslySetInnerHTML={{ __html: record.content }}
                ></div>
              </Col>
            </Row>
          ) : null}
          {/*附件*/}
          {arr.length > 0 ? (
            <div className={"attachmentsBox"}>
              <span className={"title"}>点击下载:</span>
              {arr.map((item, index) => {
                const { name, url: attachmentUrl } = item;
                return (
                  <a
                    className={"link"}
                    href={"javascript:;"}
                    onClick={() => {
                      const url = `${attachmentPrefixUrl}${attachmentUrl}`;
                      console.log(url);
                      window.open(url);
                    }}
                  >
                    {`${index + 1}.${name}`}
                  </a>
                );
              })}
            </div>
          ) : null}
        </PreviewBody>
      </Drawer>
    );
  }
}

export default PreviewView;
